import React, { useEffect, useState } from 'react';
import User from "../entity/user";
import { Button, TextField } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { go, infoKey, useMyReducer } from '../util';
import { Toast } from 'antd-mobile';
import { interval } from 'rxjs';


const loginStyles = makeStyles({
    loginPage: {
        textAlign: "center",

        display: "flex",
        flexDirection: "column",

        width: 250,
        position: "absolute",
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)'
    },
    mt: {
        // width: 250,
        marginTop: 20
    },
    bCenter: {
        textAlign: "center",
        position: "absolute",
        bottom: 0,
        left: '50%',
        transform: 'translate(-50%, 0)',
        color: 'gray'
    }
});

function Login(props) {
    const [state, setState] = useMyReducer({
        account: '',
        pw: '',
    })

    useEffect(() => {
        console.log(state)
        // return () => { };
    }, []);

    function toLogin(e) {

        if (window.location.port !== '3000') {
            Toast.show('账号错误')
            return
        }

        const user = new User('17132307428', 'kiven171', '王力', 'kiven')
        // sessionStorage.setItem(infoKey, JSON.stringify(user))
        localStorage.setItem(infoKey, JSON.stringify(user))
        window.location.href = '/'
    }

    const pageStyle = loginStyles(props)
    return (
        <div>
            <form noValidate autoComplete="off"
                className={pageStyle.loginPage}
                target='_self'
                onSubmit={toLogin}>
                <div>
                    <span style={{ color: '#D02090', fontSize: 30 }}>Kiven </span>
                    <span style={{ color: 'blue', fontSize: 18 }}>的博客</span>
                    <div style={{ color: '#6A5ACD', fontSize: 16, marginTop: 10 }}>
                        仅用于个人 <span style={{ color: '#6B8E23', fontSize: 18 }}>技术验证及分享</span>
                    </div>
                </div>

                <TextField id="outlined-basic"
                    className={pageStyle.mt}
                    style={{ marginTop: 20 }}
                    label="账号"
                    value={state.account}
                    type='number'
                    variant="outlined"
                    helperText='11位手机号'
                    error={state.account.length !== 11}
                    onChange={e => setState({ account: e.target.value })}
                />
                <TextField id="outlined-basic"
                    className={pageStyle.mt}
                    error={state.pw.length < 6 || state.pw.length > 15}
                    label="密码"
                    value={state.pw}
                    variant="outlined"
                    style={{ marginTop: 20 }}
                    helperText='长度6~15'
                    type='password'
                    onChange={e => setState({ pw: e.target.value })}
                />

                <Button
                    variant="contained"
                    className={pageStyle.mt}
                    color="primary"
                    style={{ marginTop: 20 }}
                    onClick={toLogin}>
                    登录
                </Button>

                <Button
                    className={pageStyle.mt}
                    onClick={(e) => go('/register')}
                    color="primary">没用账号，去注册</Button>
            </form>
            <a className={pageStyle.bCenter} href='https://beian.miit.gov.cn'>蜀ICP备20004876号-1</a>
            {/* <div onClick={() => changeRouterMode(!useHashRouter)}><InsertLinkIcon/></div> */}
        </div>
    )
}

/*class Login extends React.Component {
    constructor(props) {
        super(props);
        this.toLogin = this.toLogin.bind(this)
        // this.pageStyle = loginStyles(props)
    }

    toLogin(event) {
        const user = new User('17132307428', 'kiven171', '王力', 'kiven')
        sessionStorage.setItem(infoKey, JSON.stringify(user))
    }

    render() {
        return (
            <form noValidate autoComplete="off"
                  // className={this.pageStyle.loginPage}
                  target='_self'
                  action={this.toLogin}>
                <TextField id="outlined-basic"
                    // className={useStyles().width}
                           label="账号"
                           variant="outlined"/>
                <TextField id="outlined-basic"
                           // className={loginStyles().width}
                           label="密码"
                           variant="outlined"
                           helperText='长度6~15'
                           type='password'/>

                <Button
                    // className={loginStyles().width}
                    color="primary">注册</Button>

                <Button
                    variant="contained"
                    // className={loginStyles().width}
                    color="primary"
                    type='submit'>
                    登录
                </Button>
            </form>
        )
    }
}*/

export default Login